<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
	<title>滴滴服务端模拟</title>
	<!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    
    <!-- 可选的Bootstrap主题文件（一般不用引入） -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
    
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

	<style type="text/css">
		#main-content-top{
			float: left;
			width: 97%;
			height:1.5%;
			text-align: center;
		}	

		#main-content-middle{
			float: left;
			width: 97%;
			height:77%;
			margin: 1.5%;
			margin-bottom: 0%;
			margin-top: 0%;
		}	

		#main-content-buttom{
			float: left;
			width: 97%;
			height:17%;
			margin: 1.5%;
			margin-top: 0%;
			margin-bottom: 0%;

		}

		#content-left{
			float: left;
			width: 50%;
			height: 100%;
		}

		#content-right{
			float: left;
			width: 50%;
			height: 100%
		}
		
		#main-content-buttom-top{
			float: left;
			width: 100%;
			height:80%;
		}
		
		#main-content-buttom-top   p{
			height:135px;
		}
		
		#main-content-buttom-buttom{
			float: left;
			width: 100%;
			height:20%;
		}

		.sapn-left{
			float: left;
			width: 80%;
			height: 100%;
			cursor: pointer;
		}
		.sapn-right{
			float: right;
			width: 20%;
			height: 100%;
		}
	
	</style>
	<script type="text/javascript" src="moco/happy-trip-init.js"></script>
	<script type="text/javascript" src="moco/moco-didi-init.js"></script>
    <script type="text/javascript" src="moco/happy-trip-1.0.js"></script>

    <script type="text/javascript" src="moco/happy-trip-cycle-1.0.js"></script>

	<script type="text/javascript">
		$(function(){
			$('li:not(.li-title)').click(function(){
				$('li').css('background-color','white');
				$(this).css('background-color','#DCDCDC');
			});

			var color;
			$('.sapn-left').mouseover(function(){
				color = $(this).css('color');
				$(this).css('color','#428BCA');
			}).mouseout(function(){
				$(this).css('color',color);
			});
			
			/* $(".select_exception").click(function(){
				alert("1");
				$("#interfaces").val($(this).html());						
			}); */
			$.pollingGetException();
		});
		
		function selectToText(obj){
			var selectText =  document.getElementById("interfaces");
			selectText.value = obj.innerHTML;
		}
		
	</script>
</head>
<body>
	<div id="main-content-top">
		<h3>Moco</h3>
	</div>
	<div id="main-content-middle" >
		<div id="content-left" style="">
		</ul>
		  <li class="list-group-item li-title">
		  	<label class="list-group-title">客户端</label><label id="happytripId"></label>
		  </li>
		   <li class="list-group-item">
		  	<span class="glyphicon glyphicon-list-alt sapn-left" 
		  		onclick="$.submitHappyTripObject($.control.estimatePrice,$.happytripBaseUrl+'taxi/special/estimatePrice.jsonp','estimatePrice');">&nbsp;预估价格</span>
		  	<span class="glyphicon glyphicon-pencil span-right"  data-toggle="modal"  data-target="#myModal" ><a href="#" onclick="$.openFrom('form','title',$.control.estimatePrice,'预估价格');">&nbsp;维护数据</a>
		  	</span>
		  </li>
		  <li class="list-group-item">
		  	<span id="createOrder" class="glyphicon glyphicon-save sapn-left" onclick="$.submitHappyTripObject($.control.createOrder,$.happytripBaseUrl+'taxi/special/createOrder.jsonp','createOrder');" >&nbsp;创建订单</span>
		  	<span class="glyphicon glyphicon-pencil span-right" data-toggle="modal"  data-target="#myModal" ><a href="#" onclick="$.openFrom('form','title',$.control.createOrder,'创建订单')">&nbsp;维护数据</a></span>
		  </li>
		  <li class="list-group-item">
		  	<span id="cancelOrder" class="glyphicon glyphicon-ban-circle sapn-left" onclick="$.submitHappyTripObject($.control.cancelOrder,$.happytripBaseUrl+'taxi/special/cancelOrder.jsonp');" >&nbsp;取消订单</span>
		  	<span class="glyphicon glyphicon-pencil span-right" data-toggle="modal"   data-target="#myModal" ><a href="#" onclick="$.openFrom('form','title',$.control.cancelOrder,'取消订单')">&nbsp;维护数据</a></span>
		  </li>
		  <li class="list-group-item">
		  	<span id="feeConfirm" class="glyphicon glyphicon-ok-circle sapn-left" onclick="$.submitHappyTripObject($.control.feeConfirm,$.happytripBaseUrl+'taxi/special/feeConfirm.jsonp');" >&nbsp;费用确认</span>
		  	<span class="glyphicon glyphicon-pencil span-right" data-toggle="modal"  data-target="#myModal" ><a href="#" onclick="$.openFrom('form','title',$.control.feeConfirm,'费用确认')">&nbsp;维护数据</a></span>
		  </li>
		  <li class="list-group-item">
		  	<span id="complaint" class="glyphicon glyphicon-exclamation-sign sapn-left" onclick="$.submitHappyTripObject($.control.complaintOrder,$.happytripBaseUrl+'taxi/special/complaintOrder.jsonp');" >&nbsp;订单投诉</span>
		  	<span class="glyphicon glyphicon-pencil span-right" data-toggle="modal"  data-target="#myModal" ><a href="#" onclick="$.openFrom('form','title',$.control.complaintOrder,'订单投诉')">&nbsp;维护数据</a></span>
		  </li>
		  <li class="list-group-item">
		  	<span class="glyphicon glyphicon-remove-circle sapn-left" onclick="$.submitHappyTripObject($.control.closeTip,$.happytripBaseUrl+'taxi/special/closeTip.jsonp');" >&nbsp;关闭提示</span>
		  	<span class="glyphicon glyphicon-pencil span-right" data-toggle="modal"  data-target="#myModal"  ><a href="#" onclick="$.openFrom('form','title',$.control.closeTip,'关闭提示')">&nbsp;维护数据</a></span>
		  </li>
		  <li class="list-group-item">
		  	<span id="getOrderInfo" class="glyphicon glyphicon-th-large sapn-left" onclick="$.submitHappyTripObject($.control.common,$.happytripBaseUrl+'taxi/special/getOrderInfo.jsonp');" >&nbsp;订单信息</span>
		  	<span class="glyphicon glyphicon-pencil span-right" data-toggle="modal"  data-target="#myModal"  ><a href="#" onclick="$.openFrom('form','title',$.control.common,'订单信息')">&nbsp;维护数据</a></span>
		  </li>
		  <li class="list-group-item">
		  	<span class="glyphicon glyphicon-th sapn-left" onclick="$.submitHappyTripObject($.control.common,$.happytripBaseUrl+'taxi/special/getOrderInfoExt.jsonp');" >&nbsp;订单详细</span>
		  	<span class="glyphicon glyphicon-pencil span-right" data-toggle="modal"  data-target="#myModal"  ><a href="#" onclick="$.openFrom('form','title',$.control.common,'订单详细')">&nbsp;维护数据</a></span>
		  </li>
		  <li class="list-group-item">
		  	<span class="glyphicon glyphicon-edit sapn-left" onclick="$.submitHappyTripObject($.control.commentOrder,$.happytripBaseUrl+'taxi/special/commentOrder.jsonp');" >&nbsp;订单评价</span>
		  	<span class="glyphicon glyphicon-pencil span-right" data-toggle="modal"  data-target="#myModal"  ><a href="#" onclick="$.openFrom('form','title',$.control.commentOrder,'订单评价')">&nbsp;维护数据</a></span>
		  </li>
		  <li class="list-group-item">
		  	<span id="comment" class="glyphicon glyphicon-comment sapn-left" onclick="$.submitHappyTripObject($.control.common,$.happytripBaseUrl+'taxi/special/getOrderComment.jsonp');" >&nbsp;获取评价</span>
		  	<span class="glyphicon glyphicon-pencil span-right" data-toggle="modal"  data-target="#myModal"  ><a href="#" onclick="$.openFrom('form','title',$.control.common,'获取评价')">&nbsp;维护数据</a></span>
		  </li>
		   <li class="list-group-item">
		  	<span class="glyphicon glyphicon-map-marker sapn-left" onclick="$.submitHappyTripObject($.control.getCityCars,$.happytripBaseUrl+'taxi/special/getCityCars.jsonp');" >&nbsp;城市ID</span>
		  	<span class="glyphicon glyphicon-pencil span-right" data-toggle="modal"  data-target="#myModal"  ><a href="#" onclick="$.openFrom('form','title',$.control.getCityCars,'城市ID')">&nbsp;维护数据</a></span>
		  </li>
		 <ul class="list-group"> 	
		</div>	
		<div id="content-right" >
		</ul>
			<li class="list-group-item li-title">
		  	<label class="list-group-title">滴滴端</label><label id="didiId"></label>
		  </li>
		  <li class="list-group-item"><span class="glyphicon glyphicon-user sapn-left"  onclick="$.submitMocoObject($.moco.acceptOrder,'/moco/special/acceptOrder');" >&nbsp;司机接单接口</span>
		  	<span class="glyphicon glyphicon-pencil span-right" data-toggle="modal" data-target="#myModal" ><a href="#" 
		  	onclick="$.openFrom('form','title',$.moco.acceptOrder,'司机接单')">&nbsp;维护数据</a></span>
		  </li>
		  <li class="list-group-item">
		  	<span class="glyphicon glyphicon-ok sapn-left"  onclick="$.submitMocoObject($.moco.driverConfirmReach,'/moco/special/driverConfirmReach');" >&nbsp;司机确认到达</span>
		  	<span class="glyphicon glyphicon-pencil span-right" data-toggle="modal" data-target="#myModal" ><a href="#" 
		  	onclick="$.openFrom('form','title',$.moco.driverConfirmReach,'司机确认到达')">&nbsp;维护数据</a></span>
		  </li>
		  <li class="list-group-item">
		  	<span class="glyphicon glyphicon-saved sapn-left"  onclick="$.submitMocoObject($.moco.driverConfirmTaken,'/moco/special/driverConfirmTaken');" >&nbsp;确认乘客上车</span>
		  	<span class="glyphicon glyphicon-pencil span-right" data-toggle="modal" data-target="#myModal" ><a href="#" 
		  	onclick="$.openFrom('form','title',$.moco.driverConfirmTaken,'确认乘客上车')" >&nbsp;维护数据</a></span>
		  </li>
		  <li class="list-group-item">
		  	<span class="glyphicon glyphicon-comment sapn-left"  onclick="$.submitMocoObject($.moco.driverArrive,'/moco/special/driverArrive');" >&nbsp;司机发起收款</span>
		  	<span class="glyphicon glyphicon-pencil span-right" data-toggle="modal" data-target="#myModal" ><a href="#" 
		  	onclick="$.openFrom('form','title',$.moco.driverArrive,'司机发起收款')">&nbsp;维护数据</a></span>
		  </li>
		  <li class="list-group-item">
		  	<span class="glyphicon glyphicon-remove sapn-left"  onclick="$.submitMocoObject($.moco.driverCancelOrder,'/moco/special/driverCancelOrder');" >&nbsp;司机取消订单</span>
		  	<span class="glyphicon glyphicon-pencil span-right" data-toggle="modal" data-target="#myModal" ><a href="#" 
		  	onclick="$.openFrom('form','title',$.moco.driverCancelOrder,'司机取消订单')">&nbsp;维护数据</a></span>
		  </li>
		  <li class="list-group-item">
		  	<span class="glyphicon glyphicon-share-alt sapn-left"  onclick="$.submitMocoObject($.moco.autoCallback,'/moco/special/autoCallback');" >&nbsp;支付回调接口</span>
		  	<span class="glyphicon glyphicon-pencil span-right" data-toggle="modal" data-target="#myModal" ><a href="#" 
		  	onclick="$.openFrom('form','title',$.moco.autoCallback,'支付回调')">&nbsp;维护数据</a></span>
		  </li>
		  <li class="list-group-item">
		  	<span class="glyphicon glyphicon-retweet sapn-left"  onclick="$.submitMocoObject($.moco.modifyFee,'/moco/special/modifyFee');" >&nbsp;客服改价接口</span>
		  	<span class="glyphicon glyphicon-pencil span-right" data-toggle="modal" data-target="#myModal" ><a href="#" 
		  	onclick="$.openFrom('form','title',$.moco.modifyFee,'客服改价')">&nbsp;维护数据</a></span>
		  </li>
		  <li class="list-group-item">
		  	<span class="glyphicon glyphicon-usd sapn-left"  onclick="$.submitMocoObject($.moco.feeRefund,'/moco/special/feeRefund');" >&nbsp;客服退款接口</span>
		  	<span class="glyphicon glyphicon-pencil span-right" data-toggle="modal" data-target="#myModal" ><a href="#" 
		  	onclick="$.openFrom('form','title',$.moco.feeRefund,'客服退款')">&nbsp;维护数据</a></span>
		  </li>		  
		  <li class="list-group-item">
		  	<span class="glyphicon glyphicon-remove-sign sapn-left"  onclick="$.submitMocoObject($.moco.setException,'/moco/special/setException','exception');" >&nbsp;指定异常接口</span>
		  	<span class="glyphicon glyphicon-pencil span-right" data-toggle="modal" data-target="#myModal" ><a href="#" 
		  	onclick="$.openFrom('form','title',$.moco.setException,'指定异常')">&nbsp;维护数据</a></span>
		  </li>
		  <li class="list-group-item">
		  	<span class="glyphicon glyphicon-trash sapn-left"  onclick="$.submitMocoObject($.moco.closeOrder,'/moco/special/closeOrder');" >&nbsp;客服关单接口</span>
		  	<span class="glyphicon glyphicon-pencil span-right" data-toggle="modal" data-target="#myModal" ><a href="#" 
		  	onclick="$.openFrom('form','title',$.moco.closeOrder,'客服关单')">&nbsp;维护数据</a></span>
		  </li>
		  <li class="list-group-item">
		  	<span class="glyphicon glyphicon-trash sapn-left"  onclick="$.submitMocoObject($.moco.closeUnfinishOrder,'/moco/special/closeUnfinishOrder');" >&nbsp;关闭所有订单</span>
		  	<span class="glyphicon glyphicon-pencil span-right" data-toggle="modal" data-target="#myModal" ><a href="#" 
		  	onclick="$.openFrom('form','title',$.moco.closeUnfinishOrder,'关闭所有订单')">&nbsp;维护数据</a></span>
		  </li>
		 <ul class="list-group"> 
		</div>	
	</div>
	<div id="main-content-buttom" >
		<div id="main-content-buttom-top">
			<ul class="nav nav-tabs" role="tablist">
			  <li role="presentation" class="active">
			  	<a href="#result" role="tab" data-toggle="tab">执行结果</a>
			  </li>
			  <li role="presentation">
			  	<a href="#orderInfo" role="tab" data-toggle="tab">订单信息</a>
			  </li>
			</ul>
			<div class="tab-content">
			  <div role="tabpanel" class="tab-pane active" id="result">
				 <p id="exeResult" >
				  	[暂无结果]
				</p>
			  </div>
			  <div role="tabpanel" class="tab-pane"  id="orderInfo">
			  	<p id="exeOrderInfo">
			  		[暂无结果]
			    </p>
			  </div>
			</div>
		</div>
		<div id="main-content-buttom-buttom">
			<div class="progress">
				  <div class="progress-bar progress-bar-info" id="exeProgress" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
				    <span class="sr-only">40% Complete (success)</span>
				  </div>
				 <!--  danger success -->
			</div>
		</div>		
	</div>



	<!-- 模态框（Modal） -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						&times;
					</button>
					<h4 class="modal-title" id="title">
						模态框（Modal）标题
					</h4>
				</div>
				<div class="modal-body" id="form">
					在这里添加一些文本
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭 </button>
					<button type="button" class="btn btn-primary" data-dismiss="modal" 
						onclick="$.saveData('dataform',$.currControlData)"> 保存 </button>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal -->
	</div>
</body>
</html>